<template>
	<div class="detection-template">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addTemplate">新增检测模板</el-button>
				<el-input v-model="searchName" placeholder="搜索模板名称" style="width: 200px; margin-left: 10px" clearable />
				<el-select v-model="searchType" placeholder="筛选检测类型" style="width: 180px; margin-left: 10px" clearable>
					<el-option label="物理检测" value="物理检测" />
					<el-option label="化学检测" value="化学检测" />
					<el-option label="微生物检测" value="微生物检测" />
				</el-select>
			</div>

			<el-table :data="filteredTemplates" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="templateId" label="编号" sortable></el-table-column>
				<el-table-column prop="templateName" label="名称" sortable></el-table-column>
				<el-table-column prop="templateType" label="检测类型" sortable></el-table-column>
				<el-table-column prop="enabled" label="是否启用" sortable>
					<template #default="scope">
						<el-tag :type="scope.row.enabled ? 'success' : 'danger'">{{ scope.row.enabled ? '启用' : '停用'
							}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editTemplate(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="检测模板" width="500px">
			<el-form :model="currentTemplate" label-width="120px">
				<el-form-item label="编号">
					<el-input v-model="currentTemplate.templateId" />
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="currentTemplate.templateName" />
				</el-form-item>
				<el-form-item label="检测类型">
					<el-select v-model="currentTemplate.templateType" placeholder="选择检测类型">
						<el-option label="物理检测" value="物理检测" />
						<el-option label="化学检测" value="化学检测" />
						<el-option label="微生物检测" value="微生物检测" />
					</el-select>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-switch v-model="currentTemplate.enabled" active-text="启用" inactive-text="停用" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="currentTemplate.remark" type="textarea" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveTemplate">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const templates = ref([
	{ templateId: 'DT001', templateName: '成品外观检测', templateType: '物理检测', enabled: true, remark: '检测外观完整性' },
	{ templateId: 'DT002', templateName: '含量检测', templateType: '化学检测', enabled: true, remark: '检测药物含量' },
	{ templateId: 'DT003', templateName: '无菌检测', templateType: '微生物检测', enabled: false, remark: '检测是否无菌' },
])

// 生成 12 条模拟数据
for (let i = 4; i <= 15; i++) {
	templates.value.push({
		templateId: `DT00${i}`,
		templateName: `模板${i}`,
		templateType: i % 3 === 0 ? '物理检测' : (i % 3 === 1 ? '化学检测' : '微生物检测'),
		enabled: i % 2 === 0,
		remark: i % 2 === 0 ? '周期性检测' : '常规检测'
	})
}

const searchName = ref('')
const searchType = ref('')
const dialogVisible = ref(false)
const currentTemplate = ref({})

// 筛选
const filteredTemplates = computed(() =>
	templates.value.filter(t =>
		(!searchName.value || t.templateName.includes(searchName.value)) &&
		(!searchType.value || t.templateType === searchType.value)
	)
)

// 新增模板
const addTemplate = () => {
	currentTemplate.value = { templateId: '', templateName: '', templateType: '', enabled: true, remark: '' }
	dialogVisible.value = true
}

// 编辑模板
const editTemplate = (row) => {
	currentTemplate.value = { ...row }
	dialogVisible.value = true
}

// 保存模板
const saveTemplate = () => {
	if (!currentTemplate.value.templateId || !currentTemplate.value.templateName) {
		ElMessage.error('编号和名称不能为空')
		return
	}
	const index = templates.value.findIndex(t => t.templateId === currentTemplate.value.templateId)
	if (index >= 0) {
		templates.value[index] = { ...currentTemplate.value }
		ElMessage.success('模板已更新')
	} else {
		templates.value.push({ ...currentTemplate.value })
		ElMessage.success('模板已新增')
	}
	dialogVisible.value = false
}

// 删除模板
const deleteTemplate = (row) => {
	ElMessageBox.confirm('确认删除该模板吗？', '提示', { type: 'warning' })
		.then(() => {
			templates.value = templates.value.filter(t => t.templateId !== row.templateId)
			ElMessage.success('模板已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.detection-template .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
